<template>
    <div class="unit">
        <div class="bottom box-content">
            <div class="move-title">单位管理</div>
            <div class="middle-box">
                <el-button icon="el-icon-plus" @click="add">新增单位</el-button>
            </div>
            <div class="middle">
                单位名称：<el-input v-model="params.name" placeholder="请输入内容"></el-input>
                <el-button icon="el-icon-search" @click="search">查询</el-button>
            </div>
            <publicTable
                :columnData="unitColumn"
                :tableData="tableData"
                :maxWidth="true"
                style="width: 100%; height: 100%; flex-grow: 0.5"
            />
            <el-pagination
                background
                layout="prev, pager, next"
                :total="total"
                :pager-count="5"
                :current-page="params.paged"
                :page-size="params.pageSize"
                @current-change="handleChange"
            />
        </div>
        <public-dialog :dialogVisible.sync="addDialogVisible" :formData="addForm" @submit="addSave" />
        <public-dialog :dialogVisible.sync="editDialogVisible" :formData="editForm" @submit="editSave" />
        <select-dialog :dialogVisible.sync="moveDialogVisible" :formData="moveForm" @submit="moveSave" />
        <delet-dialog
            :dialogVisible.sync="deletDialogVisible"
            @submit="deletSave"
            :formData="{
                title: '提示',
                cancelBtn: '取消',
                saveBtn: '确定',
                message: '是否要删除单位',
            }"
        />
        <el-dialog
            :visible.sync="mapVisible"
            width="500px"
            :show-close="false"
            custom-class="map-dialog"
            :close-on-click-modal="false"
            :close-on-press-escape="false"
        >
            <div slot="title" class="title">
                <div>地图获取</div>
                <i class="el-icon-close" @click="mapVisible = false" style="cursor: pointer"></i>
            </div>
            <div id="container" style="width: 500px; height: 460px"></div>
        </el-dialog>
    </div>
</template>

<script>
import publicTable from '@/components/publicTable';
import publicDialog from '@/components/publicDialog';
import selectDialog from '@/components/selectDialog';
import deletDialog from '@/components/deletDialog';
import {unitColumn} from '@/utils/column';
import {getUnitMap, addUnit, delectUnit, editUnit} from '@/utils/api';
import AMapLoader from '@amap/amap-jsapi-loader';
window._AMapSecurityConfig = {
    securityJsCode: '25287497e8a6f7a6318f2c9ad03fe4ff', //填写你的安全密钥
};
export default {
    name: 'unit',
    components: {
        publicTable,
        publicDialog,
        selectDialog,
        deletDialog,
    },
    data() {
        return {
            unitColumn,
            activeName: 'first',
            params: {
                name: '',
                paged: 1,
                pageSize: 10,
            },
            tableData: [],
            addDialogVisible: false,
            item: {
                name: '',
                lon: '',
                lat: '',
                province: '',
                city: '',
                description: '',
                remark: '',
            },
            addForm: {
                formConfig: [
                    {
                        type: 'input',
                        fieldName: 'name',
                        label: '单位名称：',
                        required: true,
                    },
                    {
                        type: 'input',
                        fieldName: 'lon',
                        label: '经度：',
                        required: true,
                        inputClick: 'inputClick',
                    },
                    {
                        type: 'input',
                        fieldName: 'lat',
                        label: '纬度：',
                        required: true,
                        inputClick: 'inputClick',
                    },
                    {
                        type: 'input',
                        fieldName: 'province',
                        label: '省：',
                    },
                    {
                        type: 'input',
                        fieldName: 'city',
                        label: '市：',
                    },
                    {
                        type: 'input',
                        fieldName: 'description',
                        label: '单位描述：',
                    },
                    {
                        type: 'input',
                        fieldName: 'remark',
                        label: '备注：',
                    },
                ],
                otherConfig: {
                    title: '新增单位',
                    cancelBtn: '取消',
                    saveBtn: '保存',
                },
                form: {
                    name: '',
                    lon: '',
                    lat: '',
                    province: '',
                    city: '',
                    description: '',
                    remark: '',
                },
            },
            editDialogVisible: false,
            editForm: {
                formConfig: [
                    {
                        type: 'input',
                        fieldName: 'name',
                        label: '单位名称：',
                        required: true,
                    },
                    {
                        type: 'input',
                        fieldName: 'lon',
                        label: '经度：',
                        required: true,
                        inputClick: 'inputClick',
                    },
                    {
                        type: 'input',
                        fieldName: 'lat',
                        label: '纬度：',
                        required: true,
                        inputClick: 'inputClick',
                    },
                    {
                        type: 'input',
                        fieldName: 'province',
                        label: '省：',
                    },
                    {
                        type: 'input',
                        fieldName: 'city',
                        label: '市：',
                    },
                    {
                        type: 'input',
                        fieldName: 'description',
                        label: '单位描述：',
                    },
                    {
                        type: 'input',
                        fieldName: 'remark',
                        label: '备注：',
                    },
                ],
                otherConfig: {
                    title: '编辑单位',
                    cancelBtn: '取消',
                    saveBtn: '保存',
                },
                form: {},
            },
            //迁移
            moveDialogVisible: false,
            moveForm: {
                otherConfig: {
                    title: '归属单位',
                    cancelBtn: '取消',
                    saveBtn: '保存',
                    options: ['--', '输电二所', '输电三所'],
                },
                form: {
                    checkedArr: [],
                },
            },
            mapVisible: false,
            map: null, // 当前显示的地图区域对象
            deletDialogVisible: false,
            row: {},
            total: 0,
        };
    },
    async created() {
        this.getList(this.params);
    },
    methods: {
        async getList(params) {
            let res = await getUnitMap(params); //获取单位信息
            if (res && res.data && res.data.data) {
                this.total = res.data.totalCount;
                this.tableData = res.data.data.map((item, index) => {
                    item.index = (this.params.paged - 1) * this.params.pageSize + index + 1;
                    return item;
                });
            } else {
                this.tableData = [];
                this.total = 0;
            }
        },
        //查询
        search() {
            this.params.paged = 1;
            this.getList({...this.params});
        },
        handleChange(e) {
            this.params.paged = e;
            this.getList({...this.params});
        },
        add() {
            this.addForm.form = JSON.parse(JSON.stringify(this.item));
            this.addDialogVisible = true;
        },
        //新增确认
        addSave(val) {
            addUnit(this.addForm.form).then(res => {
                if (res.status === 2) {
                    this.params.paged = 1;
                    this.getList(this.params);
                    this.addDialogVisible = false;
                    this.$message({
                        message: '新增单位成功',
                        type: 'success',
                    });
                } else {
                    this.$message.error(res.statusMsg);
                }
            });
        },
        inputClick(item) {
            this.mapVisible = true;
            console.log('item', item);
            let load = AMapLoader.load({
                key: '36ee10ec4ccd5cea768c040433499406', // 申请好的Web端开发者Key，首次调用 load 时必填
                version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
                plugins: ['AMap.Marker', 'AMap.Scale', 'AMap.AutoComplete'], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
            })
                .then(AMap => {
                    this.map = new AMap.Map('container', {
                        //设置地图容器id
                        viewMode: '3D', //是否为3D地图模式
                        zoom: 5, //初始化地图级别
                        center: [105.602725, 37.076636], //初始化地图中心点位置
                        features: ['road', 'point'],
                    });
                    // this.latitude()
                    this.map.on('click', this.latitude);
                })
                .catch(e => {
                    console.log(e);
                });
        },
        //点击获取经纬度
        latitude(ev) {
            let lnglat = ev.lnglat;
            // 触发事件类型
            this.addForm.form.lat = lnglat.lat;
            this.addForm.form.lon = lnglat.lng;
            this.editForm.form.lat = lnglat.lat;
            this.editForm.form.lon = lnglat.lng;
            this.mapVisible = false;
        },
        editSave(val) {
            let value = JSON.parse(JSON.stringify(val));
            let params = Object.keys(value).reduce((pre, cur) => {
                pre[`${cur}`] = String(value[`${cur}`]);
                return pre;
            }, {});
            delete params.atime;
            delete params.delete_flag;
            delete params.index; //后端要求这样传参数
            editUnit(params).then(res => {
                if (res.status === 2) {
                    this.params.paged = 1;
                    this.getList(this.params);
                    this.editDialogVisible = false;
                    this.$message({
                        message: '编辑单位成功',
                        type: 'success',
                    });
                } else {
                    this.$message.error(res.statusMsg);
                }
            });
        },
        editRow(row, prop) {
            this.editForm.form = JSON.parse(JSON.stringify(row));
            this.editDialogVisible = true;
        },
        moveShow() {
            this.moveDialogVisible = true;
        },
        moveSave(val) {
            console.log('val', val);
            this.moveDialogVisible = false;
        },
        //删除单位
        delete(row) {
            this.row = row;
            this.deletDialogVisible = true;
        },
        deletSave() {
            delectUnit(this.row.id)
                .then(res => {
                    if (res.status === 2) {
                        this.getList(this.params);
                        this.deletDialogVisible = false;
                        this.$message({
                            message: '删除单位成功',
                            type: 'success',
                        });
                    } else {
                        this.$message.error(res.statusMsg);
                    }
                })
                .catch(err => {
                    this.$message.error(err);
                });
        },
    },
};
</script>
<style scoped>
.box-content >>> .el-pagination {
    width: 100%;
    margin-bottom: 10px;
}
/* 滚动条轨迹 */
.box-content >>> .table-class::-webkit-scrollbar {
    width: 4px; /* 设置滚动条的宽度 */
    height: 12px; /* 设置水平滚动条的高度（如果需要） */
}

/* 滚动条滑块 */
.box-content >>> .table-class::-webkit-scrollbar-thumb {
    background-color: #395ee2; /* 滑块的颜色 */
    border-radius: 2px; /* 滑块的圆角 */
}

/* 滚动条滑块在悬停时的颜色 */
.box-content >>> .table-class::-webkit-scrollbar-thumb:hover {
    background-color: #000000; /* 悬停时的颜色 */
}

/* 滚动条轨迹 */
.box-content >>> .table-class::-webkit-scrollbar-track {
    background-color: #000000; /* 轨迹的颜色 */
    border-radius: 6px; /* 轨迹的圆角 */
}
</style>

<style scoped lang="scss">
.unit {
    padding: 0 10px;
    width: 100%;
    height: calc(100% - 0px);

    .bottom {
        position: relative;
        background-image: url('@/assets/img/atlas-message.png');
        // background-image: url('@/assets/img/right-top.png');
        background-size: 100% 100%;
        width: 100%;
        height: 100%;
        background-repeat: no-repeat;
        z-index: 2;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;

        .title {
            color: #19ecff;
            font-size: 14px;
        }

        .middle {
            display: flex;
            align-items: center;
            justify-content: flex-start;
            color: #ffffff;
            width: 100%;
            padding: 20px 0 10px;

            .el-input {
                width: 200px;
            }

            ::v-deep .el-input__inner {
                background: #021045;
                border-radius: 4px 4px 4px 4px;
                border: 1px solid #00c2ff;
                font-size: 12px;
                height: 30px;
                width: 200px;
                color: #ffffff;
            }

            ::v-deep .el-button {
                background: #021c34;
                box-shadow: inset 0px 0px 8px 0px #00c2ff;
                border-radius: 4px 4px 4px 4px;
                color: #ffffff;
                font-size: 12px;
                padding: 0px 10px !important;
                // line-height: 20px;
                height: 30px;
                border: none;
                margin-left: 10px;
            }
        }

        .middle-box {
            .el-input {
                width: 200px;
                margin-right: 10px;
            }

            ::v-deep .el-input__inner {
                background: #021045;
                border-radius: 4px 4px 4px 4px;
                border: 1px solid #00c2ff;
                font-size: 12px;
                height: 30px;
                width: 200px;
            }

            ::v-deep .el-button {
                background: #021c34;
                box-shadow: inset 0px 0px 8px 0px #00c2ff;
                border-radius: 4px 4px 4px 4px;
                color: #ffffff;
                font-size: 12px;
                padding: 0px 10px !important;
                // line-height: 20px;
                height: 30px;
                border: none;
                position: absolute;
                top: 10px;
                right: 20px;
            }
        }
    }
    ::v-deep .el-pagination.is-background .btn-next,
    ::v-deep .el-pagination.is-background .btn-prev,
    ::v-deep .el-pagination.is-background .el-pager li {
        background: rgba(4, 44, 91, 0.02);
        box-shadow: inset 0px 0px 8px 0px #0e5fff;
        border-radius: 5px 5px 5px 5px;
        border: 1px solid #0e5fff;
        color: #bbbdbf;
    }
    ::v-deep .el-pagination.is-background .el-pager li:not(.disabled).active {
        background: #0177fd;
    }
    ::v-deep .map-dialog {
        height: 500px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        .el-dialog__header {
            width: 100%;
            height: 100%;
            padding: 0 16px;
            .title {
                width: 100%;
                height: 100%;
                display: flex;
                justify-content: space-between;
                align-items: center;
            }
        }
        .el-dialog__body {
            padding: 0;
            flex: 1;
        }
    }
}

/* 组件样式 */
.atlas-message {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.monitoring-nav {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.button-box {
    line-height: 42px;
    background-image: url('@/assets/img/button-bj.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    width: 160px;
    text-align: center;
    font-size: 16px;
    color: #ffffff;
}

.left-icon {
    background-image: url('@/assets/img/jt-left.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    width: 42px;
    height: 42px;
}

.right-icon {
    background-image: url('@/assets/img/jt-right.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    width: 42px;
    height: 42px;
}
</style>
